<template>
  <Dialog v-model="dialogVisible" title="设为默认模板" width="500px">
    <div v-loading="formLoading">
      <el-alert
        title="设置说明"
        type="warning"
        :closable="false"
        show-icon
      >
        <template #default>
          <p>1. 设为默认模板后，该模板将作为对应职业和等级的首选模板</p>
          <p>2. 原有的默认模板将被取消默认状态</p>
          <p>3. 默认模板在创建评价计划时会自动选用</p>
        </template>
      </el-alert>
      
      <div class="template-info">
        <h4>模板信息</h4>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="模板名称">
            {{ templateInfo.templateName }}
          </el-descriptions-item>
          <el-descriptions-item label="模板编码">
            {{ templateInfo.templateCode }}
          </el-descriptions-item>
          <el-descriptions-item label="适用职业">
            {{ templateInfo.professionName }}
          </el-descriptions-item>
          <el-descriptions-item label="技能等级">
            {{ templateInfo.skillLevel }}
          </el-descriptions-item>
          <el-descriptions-item label="评价方式">
            {{ templateInfo.evaluationMethod }}
          </el-descriptions-item>
          <el-descriptions-item label="当前状态">
            <el-tag :type="templateInfo.isDefault ? 'success' : 'info'">
              {{ templateInfo.isDefault ? '默认模板' : '普通模板' }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      
      <div v-if="conflictTemplates.length > 0" class="conflict-info">
        <h4>冲突模板</h4>
        <el-alert
          title="以下模板将被取消默认状态"
          type="info"
          :closable="false"
          show-icon
        />
        <el-table :data="conflictTemplates" border style="margin-top: 10px;">
          <el-table-column prop="templateName" label="模板名称" />
          <el-table-column prop="templateCode" label="模板编码" />
          <el-table-column prop="professionName" label="适用职业" />
          <el-table-column prop="skillLevel" label="技能等级" />
        </el-table>
      </div>
      
      <div class="confirmation">
        <el-checkbox v-model="confirmed">
          我已了解设置默认模板的影响，确认执行此操作
        </el-checkbox>
      </div>
    </div>
    
    <template #footer>
      <el-button 
        @click="setDefault" 
        type="primary" 
        :disabled="formLoading || !confirmed || templateInfo.isDefault"
      >
        确认设置
      </el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

defineOptions({ name: 'TemplateSetDefault' })

const emit = defineEmits(['success'])

const dialogVisible = ref(false)
const formLoading = ref(false)
const confirmed = ref(false)
const conflictTemplates = ref([])

const templateInfo = reactive({
  id: undefined,
  templateName: '',
  templateCode: '',
  professionName: '',
  skillLevel: '',
  evaluationMethod: '',
  isDefault: false
})

/** 打开弹窗 */
const open = async (template: any) => {
  dialogVisible.value = true
  Object.assign(templateInfo, template)
  confirmed.value = false
  
  if (!template.isDefault) {
    await checkConflictTemplates()
  }
}

/** 检查冲突的默认模板 */
const checkConflictTemplates = async () => {
  try {
    formLoading.value = true
    
    // TODO: 调用检查冲突模板的API
    // const conflicts = await checkDefaultTemplateConflicts({
    //   professionCode: templateInfo.professionCode,
    //   skillLevel: templateInfo.skillLevel,
    //   evaluationMethod: templateInfo.evaluationMethod
    // })
    
    // 模拟数据
    conflictTemplates.value = []
  } catch (error) {
    console.error('检查冲突模板失败:', error)
  } finally {
    formLoading.value = false
  }
}

/** 设为默认模板 */
const setDefault = async () => {
  if (templateInfo.isDefault) {
    ElMessage.warning('该模板已经是默认模板')
    return
  }
  
  try {
    await ElMessageBox.confirm(
      '确认将此模板设为默认模板吗？此操作将影响相关的评价计划创建。',
      '确认设置',
      {
        type: 'warning'
      }
    )
    
    formLoading.value = true
    
    // TODO: 调用设为默认模板的API
    // await setDefaultTemplate(templateInfo.id)
    
    ElMessage.success('设置默认模板成功')
    dialogVisible.value = false
    emit('success')
  } catch (error) {
    if (error !== 'cancel') {
      console.error('设置默认模板失败:', error)
      ElMessage.error('设置默认模板失败')
    }
  } finally {
    formLoading.value = false
  }
}

defineExpose({ open })
</script>

<style scoped>
.template-info {
  margin: 20px 0;
}

.template-info h4 {
  margin: 0 0 15px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.conflict-info {
  margin: 20px 0;
}

.conflict-info h4 {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.confirmation {
  margin: 20px 0;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
  text-align: center;
}
</style>
